<template>
    <div class="city">
        <van-index-bar :index-list="indexList" :sticky="false">
            <van-index-anchor index="定位">定位城市</van-index-anchor>
            <city-list :lis="[locationCity]" @changecity="changeCity($event)"></city-list>

            <van-index-anchor index="最近">最近访问城市</van-index-anchor>
            <city-list :lis="localCity" v-if="localCity" @changecity="changeCity($event)" :isLocal="true" @delcity="delCity($event)"></city-list>

            <van-index-anchor index="热门">热门城市</van-index-anchor>
            <city-list :lis="hotCity" v-if="hotCity" @changecity="changeCity($event)"></city-list>

            <template v-for="item in cityList">
                <van-index-anchor :index="item.letter" :key="item.letter" v-if="cityList.length>0"/>
                <!-- <div v-for="ci in item.nms" :key="ci"> -->
                    <template v-for="ci in item.nms">
                    <van-cell :title='ci' :key="ci" @click="changeCity(ci)"/>
                    </template>
                <!-- </div> -->
            </template>

        </van-index-bar>
    </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import CityList from "@/components/CityList.vue"
import _ from 'lodash';

export default {
    data(){
        return{
            localCity:[],
            hotCity:[],
            cityList:[],
            indexList: ['定位', '最近', '热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
        }
    },
    created(){
        this.getcts();
        let localCity=JSON.parse(window.localStorage.getItem("cityHistory"));
        if(localCity!==null){
            this.localCity=localCity;
        }
    },
    methods:{
        ...mapMutations(["cityChange"]),
        async getcts(){
            let re=await this.axios.get("cities.json");
            this.hotCity=re.data.hot;
            let cts=_.sortBy(re.data.cts,'py');
            let idx=this.indexList.slice(3);
            idx.forEach(letter=>{
                let arr=[];
                cts.forEach(item=>{
                    if(item.py.indexOf(letter.toLowerCase())==0){
                        arr.push(item.nm);
                    }
                })
                this.cityList.push({
                    letter:letter,
                    nms:arr
                })
            })
        },
        changeCity(nm){
            let arr=[];
            if(window.localStorage.getItem("cityHistory")!==null){
                arr=JSON.parse(window.localStorage.getItem("cityHistory"));
            }
            arr.unshift(nm);
            let duplicateReArr=_.uniqWith(arr, _.isEqual);
            let str=JSON.stringify(duplicateReArr);
            window.localStorage.setItem("cityHistory",str);
            this.cityChange(nm);
            this.$router.back();
        },
        delCity(nm){
            let index=this.localCity.indexOf(nm);
            this.localCity.splice(index,1);
            if(this.localCity.length===0){
                window.localStorage.removeItem("cityHistory");
            }else{
                window.localStorage.setItem("cityHistory",JSON.stringify(this.localCity));
            }
        }
    },
    computed:{
        ...mapState(['locationCity']),
    },
    components:{
        CityList
    }
}
</script>

<style lang="less">
.city{
    background-color: #ebebeb;

    .van-index-bar__index{
        padding-left: 0;
    }

    div{
        .van-cell{
            background-color: #f5f5f5;
    
            &::after{
                border-color: #666;
            }
        }
    }
}
</style>